<template>
  <!-- 添加 -->
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="600px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #title>
      <div
        class="u-relative u-flex u-row-center u-user-select-none custom-header"
      >
        <span class="custom-header--title">危险品等级</span>
        <div class="u-absolute-r custom-header--action">
          <i
            class="el-dialog__close u-cursor-pointer el-icon el-icon-close"
            v-throttle="() => $emit('cancel')"
          ></i>
        </div>
      </div>
    </template>
    <div>
      <h3 style="font-weight: bolder">危险品等级</h3>
      <!-- 一类 -->
      <el-checkbox
        v-model="Alldengji.one.checkAll"
        @change="handleCheckAllChange(Alldengji.one.checkAll, 'one')"
        >一类</el-checkbox
      >
      <el-checkbox-group
        v-model="Alldengji.one.checkedCities"
        @change="handleCheckedCitiesChange(Alldengji.one.checkedCities, 'one')"
      >
        <el-checkbox
          v-for="i in Alldengji.one.cities"
          :label="i"
          :key="i"
        ></el-checkbox>
      </el-checkbox-group>
      <p class="dashed-line"></p>

      <!-- 二类 -->
      <el-checkbox
        v-model="Alldengji.two.checkAll"
        @change="handleCheckAllChange(Alldengji.two.checkAll, 'two')"
        >二类</el-checkbox
      >
      <el-checkbox-group
        v-model="Alldengji.two.checkedCities"
        @change="handleCheckedCitiesChange(Alldengji.two.checkedCities, 'two')"
      >
        <el-checkbox
          v-for="i in Alldengji.two.cities"
          :label="i"
          :key="i"
        ></el-checkbox>
      </el-checkbox-group>
      <p class="dashed-line"></p>

      <!-- 三类 -->
      <el-checkbox v-model="Alldengji.three.checkAll">三类</el-checkbox>
      <p class="dashed-line"></p>

      <!-- 四类 -->
      <el-checkbox
        v-model="Alldengji.four.checkAll"
        @change="handleCheckAllChange(Alldengji.four.checkAll, 'four')"
        >四类</el-checkbox
      >
      <el-checkbox-group
        v-model="Alldengji.four.checkedCities"
        @change="
          handleCheckedCitiesChange(Alldengji.four.checkedCities, 'four')
        "
      >
        <el-checkbox
          v-for="i in Alldengji.four.cities"
          :label="i"
          :key="i"
        ></el-checkbox>
      </el-checkbox-group>
      <p class="dashed-line"></p>

      <!-- 五类 -->
      <el-checkbox
        v-model="Alldengji.five.checkAll"
        @change="handleCheckAllChange(Alldengji.five.checkAll, 'five')"
        >五类</el-checkbox
      >
      <el-checkbox-group
        v-model="Alldengji.five.checkedCities"
        @change="
          handleCheckedCitiesChange(Alldengji.five.checkedCities, 'five')
        "
      >
        <el-checkbox
          v-for="i in Alldengji.five.cities"
          :label="i"
          :key="i"
        ></el-checkbox>
      </el-checkbox-group>
      <p class="dashed-line"></p>

      <!-- 六类 -->
      <el-checkbox
        v-model="Alldengji.six.checkAll"
        @change="handleCheckAllChange(Alldengji.six.checkAll, 'six')"
        >六类</el-checkbox
      >
      <el-checkbox-group
        v-model="Alldengji.six.checkedCities"
        @change="handleCheckedCitiesChange(Alldengji.six.checkedCities, 'six')"
      >
        <el-checkbox
          v-for="i in Alldengji.six.cities"
          :label="i"
          :key="i"
        ></el-checkbox>
      </el-checkbox-group>
      <p class="dashed-line"></p>

      <!-- 七类 -->
      <el-checkbox
        v-model="Alldengji.seven.checkAll"
        @change="handleCheckAllChange(Alldengji.seven.checkAll, 'seven')"
        >七类</el-checkbox
      >
      <el-checkbox-group
        v-model="Alldengji.seven.checkedCities"
        @change="
          handleCheckedCitiesChange(Alldengji.seven.checkedCities, 'seven')
        "
      >
        <el-checkbox
          v-for="i in Alldengji.seven.cities"
          :label="i"
          :key="i"
        ></el-checkbox>
      </el-checkbox-group>
      <p class="dashed-line"></p>

      <!-- 八类 -->
      <el-checkbox v-model="Alldengji.three.eight">八类</el-checkbox>
      <p class="dashed-line"></p>

      <!-- 九类 -->
      <el-checkbox v-model="Alldengji.three.nince">九类</el-checkbox>
    </div>
    <div style="margin-bottom: 25px">
      <div class="modal__footer">
        <div class="modal__center">
          <el-button
            type="primary"
            class="btn-cancel"
            v-throttle="() => sendOrdersSubmit()"
            >保存</el-button
          >
          <el-button
            type="primary"
            class="btn-cancel"
            v-throttle="() => $emit('cancel')"
            >返回</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "xiehuodidian",

  mixins: [],

  //   组件列表
  components: {},

  props: {
    mode: {
      type: String,
      default: "adds",
    },
  },

  data() {
    return {
      dialogVisible: true,

      Alldengji: {
        one: {
          checkAll: false,
          checkedCities: [],
          cities: ["[1.1]", "[1.2]", "[1.3]", "[1.4]", "[1.5]"],
        },
        two: {
          checkAll: false,
          checkedCities: [],
          cities: ["[2.1]", "[2.2]", "[2.3]"],
        },
        three: {
          checkAll: false,
        },
        four: {
          checkAll: false,
          checkedCities: [],
          cities: ["[4.1]", "[4.2]", "[4.3]"],
        },
        five: {
          checkAll: false,
          checkedCities: [],
          cities: ["[5.1]", "[5.2]"],
        },
        six: {
          checkAll: false,
          checkedCities: [],
          cities: ["[6.1]", "[6.2]"],
        },
        seven: {
          checkAll: false,
          checkedCities: [],
          cities: ["[7.1]", "[7.2]", "[7.3]"],
        },
        eight: {
          checkAll: false,
        },
        nince: {
          checkAll: false,
        },
      },
    };
  },

  methods: {
    handleCheckAllChange(val, type) {
      let obj = {
        one: ["[1.1]", "[1.2]", "[1.3]", "[1.4]", "[1.5]"],
        two: ["[2.1]", "[2.2]", "[2.3]"],
        four: ["[4.1]", "[4.2]", "[4.3]"],
        five: ["[5.1]", "[5.2]"],
        six: ["[6.1]", "[6.2]"],
        seven: ["[7.1]", "[7.2]", "[7.3]"],
      };
      this.Alldengji[type].checkedCities = val ? obj[type] : [];
    },
    handleCheckedCitiesChange(value, type) {
      let checkedCount = value.length;
      this.Alldengji[type].checkAll =
        checkedCount === this.Alldengji[type].cities.length;
    },
    sendOrdersSubmit() {
      this.$notify.success({
        title: "消息",
        message: "保存成功",
        position: "bottom-right",
      });
      this.$emit("done");
    },
  },

  created() {},
};
</script>

<style lang="scss" scoped>
::v-deep .modal {
  &__footer {
    margin-bottom: -35px;
    margin-top: 10px;
  }

  &__center {
    display: flex;
    justify-content: space-around;
  }
}

.btn-cancel {
  width: 200px;
  background: rgb(4, 130, 176);
}

// 分页
.pagination {
  display: flex;
  justify-content: space-between;

  & .summary {
    & .el-button--default {
      width: 96px;
      background: rgb(4, 130, 176);
      color: #fff;
      text-align: center;
    }
  }
}

.custom--table {
  ::v-deep tr.current-row > td.el-table__cell {
    color: #fff;
    background-color: #0482b0 !important;
  }
}

// 弹窗表头/关闭
::v-deep .el-dialog__header {
  background: rgb(204, 204, 204);

  & .el-dialog__headerbtn {
    // display: none;
    position: absolute;
    top: 8px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 30px;
    font-weight: 400;
  }
}

::v-deep .disPeiXun {
  &__label {
    font-size: 16px;
    width: 100%;

    & .el-input__inner {
      text-align: left !important;
    }

    & em {
      color: rgb(42, 130, 228);
      font-style: unset;
    }

    & label {
      font-size: 16px;
      font-weight: 500;
    }
  }

  &__divbutton {
    & .el-radio-button__inner {
      width: 264px;
      height: 35px;
      border-radius: 4px;
      background: rgb(4, 130, 176);
      color: #fff;
    }
  }
}

// 通知回执
.Peixun {
  margin: 20px 25px auto;
  font-size: 15px;

  & em {
    color: rgb(42, 130, 228);
    font-style: unset;
  }

  &_But {
    height: 27px;
    width: 100px;
    justify-content: center;
    align-items: center;
    background: rgb(4, 130, 176);
    border: 1px solid rgb(176, 177, 177);
    color: #fff;
  }
}

.XueXICaiLiao {
  &_But {
    position: absolute;
    top: 50%;
    right: 10px;
    border: 0.5px solid;
    padding: 0 10px 0;
    min-width: 60px;
    line-height: 25px;
    transform: translateY(-50%);
  }

  &_Span {
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
    color: rgba(129, 129, 130, 1);
  }
}

.XueXICaiLiao_Span:hover {
  color: rgb(64 158 255);
}

.XueXICaiLiao_But:hover {
  background-color: #fff;
}

.isDisabled {
  display: none;
}

.dashed-line {
  border-top: 1px dashed rgb(78, 93, 121);
  margin: 0;
}
</style>
